<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="btn">获取验证码</button>

    <script>

        // 1 点击获取验证码  就变成10s倒计时
        // 2 10s倒计时结束以后   就变成获取验证码


        var oBtn = document.getElementById('btn');
        var flag = true;

        oBtn.onclick = function () {
            if (flag) {
                //    flag = false ;
                var count = 10;  // 计时
                // 把按钮的值变成10s
                oBtn.innerHTML = count + 's';
                // 倒计时
                var t = setInterval(function () {
                    count--;
                    oBtn.innerHTML = count + 's';
                    if (count === 0) {
                        clearInterval(t);
                        oBtn.innerHTML = '获取验证码' ;
                        flag = true ;
                    }
                }, 500)
                // 前面的定时器是异步的 --- flag=false 会先执行
                flag = false ;
            }

        }


    </script>

</body>

</html>